<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {nextTick, onMounted, ref} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)


const data = [
  {
    name: '1千万以下',
    value: '39'
  },
  {
    name: '1.5亿以上',
    value: '48'
  }, {
    name: '0.5-1.5亿',
    value: '86'
  }, {
    name: '1-2.5千万',
    value: '67'
  }, {
    name: '2.5-5千万',
    value: '55'
  }
]

const init = () => {
  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      legend: {
        bottom: '0'
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: ['10%', '70%'],
          center: ['50%', '40%'],
          roseType: 'area',
          data: data
        }
      ]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
}

onMounted(() => {
  nextTick(() => {
    init()
  })
})

</script>

<style lang="less" scoped>
</style>
